<template>
  <div>
    <div class="header">
      <div class="goBack" style="position: absolute;left: 0.3rem;font-size:0.18rem; width: 0.3rem;height:0.3rem"
           @click="goBack">&lt;
      </div>
      <b class="iconfont icon-triangle-l"></b>
      <span>当前城市-{{ cityName }}</span>
    </div>
    <div class="main">
      <div class="city">
        <div class="cityHeader">定位城市</div>
        <ul class="cityName">
          <li>{{ cityName }}</li>
        </ul>
      </div>
      <div class="city">
        <div class="cityHeader">热门城市</div>
        <ul class="cityName">
          <li v-for="ci in hotCity" :key="ci.id" @click.stop="selectCity($event)">{{ ci.nm }}</li>
        </ul>
      </div>
      <div class="city" v-for="le in letters" :key="le">
        <div class="cityHeader">{{ le }}</div>
        <ul class="qualifiedCity" :ref="le">
          <li v-for="ci in screenCity(le)" :key="ci.id" @click.stop="selectCity($event)">{{ ci.nm }}</li>
        </ul>
      </div>
    </div>
    <ul class="nav">
      <span>定位热门</span>
      <li v-for="le in letters" :key="le" @click.stop="changeScrollTop($event)" :ref="le">{{ le }}</li>
    </ul>
  </div>
</template>

<script>
import {mapState, mapActions} from 'vuex'

export default {
  name: "SelectCity",
  components: {},
  computed: {
    ...mapState('selectCity', ['city'])
  },
  data() {
    return {
      cityName: '',
      hotCity: [], //热门城市
      letters: [],//A-Z
    }
  },
  async mounted() {
    this.cityName = this.Bus.city
    await this.getCities()
    this.hotCity = this.city.cts.slice(0, 11) //截取热门城市
    this.addLetter()
  },
  activated() {
    console.log('select')
  },
  methods: {
    ...mapActions('selectCity', ['getCities']),
    goBack() {
      window.history.back();  //返回上一页
    },
    addLetter() { //添加A-Z
      for (let i = 65; i <= 90; i++) {
        if (i != 73 && i != 79 && i != 85 && i != 86) {
          this.letters.push(String.fromCodePoint(i))
        }
      }
    },
    screenCity(char) { //筛选城市A-Z
      return this.city.cts.filter(item => item.py[0].toUpperCase() === char)
    },
    changeScrollTop(e) { //点击A-Z跳转城市
      for (let i in this.$refs) {
        if (e.target.innerHTML == i) {
          document.documentElement.scrollTop = this.$refs[i][0].offsetTop - 30
        }
      }
    },
    selectCity(e) {
      this.Bus.city = e.target.innerHTML
      this.cityName = this.Bus.city
      window.history.back()
    }
  },


}
</script>

<style scoped lang="scss">
@import "src/assets/scss/mixin";

div {

  .header {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 0.45rem;
    font-size: 0.15rem;
    background-color: #de403d;
    color: #fff;
  }

  .main {
    .city {
      background-color: #fafafa;
      font-size: 0.14rem;

      .cityHeader {
        height: 0.2rem;
        padding-left: 0.15rem;
        font-size: 0.14rem;
        background-color: #eee;
        justify-content: space-between;
      }

      .cityName {
        padding: 0.15rem 0.15rem 0 0;
        display: flex;
        flex-wrap: wrap;

        li {
          background-color: #fff;
          padding: 0.05rem 0.15rem;
          width: 0.9rem;
          text-align: center;
          border: 0.01rem solid #666;
          margin-left: 0.25rem;
          margin-bottom: 0.15rem;

        }
      }

      .qualifiedCity {
        padding: 0.1rem;

        li {
          padding: 0.1rem 0;
          @include border-bottom-1px()
        }
      }

    }
  }

  .nav {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0.5rem;
    right: 0;
    font-size: 0.14rem;

    span {
      width: 0.3rem;
      height: 0.3rem;
    }

    li {
      text-align: center;
      margin-top: 0.03rem;
    }
  }
}
</style>